<template>
	<view class="bg-w order-item">
		<view class="flex flex-align-center flex-space-between order-sn font24">
			<text class="color-8E8E8E">订单编号 {{ dataItem.merchant_order_id }}</text>
			<text class="col" style="color: #F52200;">{{dataItem.status_detail}}</text>
		</view>
		<view class="m-t-30 goods-box flex">
			<image class="border-r10" v-if="dataItem.price" style="width: 132rpx;height: 132rpx;margin-right: 16rpx;"
				:src="dataItem.pic" mode=""></image>
			<image class="border-r10" v-else
				style="width: 200rpx;height: 200rpx;margin-right: 16rpx;margin-bottom: 30rpx;" :src="dataItem.pic"
				mode=""></image>
			<view class="flex-1">
				<view class="flex flex-align-center flex-space-between">
					<text class="color-b3 font28 f-b">{{ dataItem.service_name }}</text>
					<text style="color: #001226;" v-if="dataItem.price">
						<text class="font20">¥</text>
						<text class="font32 f-b" style="margin-left: 8rpx;">{{ dataItem.price }}</text>
					</text>
				</view>
				<view v-if="dataItem.goodsNum" class="color-b5 flex flex-align-center flex-space-between font24 m-t-10">
					<text>{{ dataItem.content }}</text>
					<text v-if="dataItem.goodsNum">X{{ dataItem.goodsNum }}</text>
				</view>
				<block v-if="dataItem.time">
					<view class="color-b5 font24" style="margin: 30rpx 0;">
						购买时间：{{ dataItem.content }}
					</view>
					<view class="color-b5 font24">
						购买时间：{{ dataItem.time }}
					</view>
				</block>

				<view v-if="dataItem.amount" class="color-001226 flex flex-space-end flex-align-center m-t-30">
					<text class="font28">支付总额</text>
					<text class="font40 f-b" style="margin-left: 16rpx;">¥{{ dataItem.amount }}</text>
				</view>
				<view class="button-box flex flex-space-end m-t-30" v-if="dataItem.btn">
					<view class="flex flex-center font28 color-b6" @click="btnClick(dataItem.btn,dataItem.id)">
						{{dataItem.btn}}</view>
				</view>
				<view class="button-box flex flex-space-end m-t-30" v-if="dataItem.status==5">
					<view class="flex flex-center font28 color-b6" @click="btnClick('取消订单',dataItem.id)">取消订单</view>
					<view class="flex flex-center font28 color-3FA897 f-b m-l-30" @click="btnClick('拒绝取消',dataItem.id)">拒绝取消</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import requestHttp from '@/providers/essential/httpService.js'
	export default {
		data() {
			return {

			}
		},
		methods: {

		},
		props: {
			dataItem: {
				type: Object,
				default: {}
			},
		},
		mounted() {
			this.xrPage()
		},
		methods: {
			xrPage(){
				switch (this.dataItem.status) {
					case 0:
						this.$set(this.dataItem,'status_detail','待支付')
						this.$set(this.dataItem,'btn')
						break
					case 1:
						this.$set(this.dataItem,'status_detail','待商家接单中')
						this.$set(this.dataItem,'btn','接受订单')
						break
					case 2:
						this.$set(this.dataItem,'status_detail','服务中')
						this.$set(this.dataItem,'btn','完成订单')
						break
					case 3:
						this.$set(this.dataItem,'status_detail','服务完成')
						this.$set(this.dataItem,'btn')
						break
					case 4:
						this.$set(this.dataItem,'status_detail','订单已取消')
						this.$set(this.dataItem,'btn')
						break
					case 5:
						this.$set(this.dataItem,'status_detail','订单取消中')
						this.$set(this.dataItem,'btn')
						break
					default:
						break
				}
			},
			btnClick(e, eid) {
				console.log(e)
				switch (e) {
					case '接受订单':
						requestHttp.getData('/magic/web/app/pay/order/reservation/take/order/' + eid, {
							id: eid
						}).then((res) => {
							this.$set(this.dataItem, 'status', 2)
							this.xrPage()
						})
						break;
					case '完成订单':
						requestHttp.postData('/magic/web/app/pay/order/reservation/update/status', {
							id: eid,
							orderStatus:3
						}).then((res) => {
							this.$set(this.dataItem, 'status', 3)
							this.xrPage()
						})
						break;
					case '取消订单':
						requestHttp.postData('/magic/web/app/pay/order/reservation/update/status', {
							id: eid,
							orderStatus:4
						}).then((res) => {
							this.$set(this.dataItem, 'status', 4)
							this.xrPage()
						})
						break;
					case '拒绝取消':
						requestHttp.postData('/magic/web/app/pay/order/reservation/update/status', {
							id: eid,
							orderStatus:2
						}).then((res) => {
							this.$set(this.dataItem, 'status', 2)
							this.xrPage()
						})
						break;
					case '测试支付':
						requestHttp.postData('/magic/web/app/pay/order/reservation/update/status', {
							id: eid,
							orderStatus:1
						}).then((res) => {
							this.$set(this.dataItem, 'status', 1)
							this.xrPage()
						})
						break;
					default:
						break;
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.color-001226 {
		color: #001226;
	}

	.order-item {
		border-radius: 32rpx;
		padding: 0 12rpx;
		margin-top: 20rpx;

		.order-sn {
			padding: 18rpx;
			border-bottom: 1rpx solid #E5E5E5;
		}

		.goods-box {
			padding: 0 18rpx;
		}
	}

	.button-box {
		margin-bottom: 30rpx;

		view {
			height: 64rpx;
			padding: 0 34rpx;
			border: 1rpx solid #E5E5E5;
			border-radius: 32rpx;
		}
	}
</style>